<template>
  <view class="contain">
    <u-navbar
        title="支付成功"
        :autoBack="true"
        titleStyle="font-weight: bold"
    >
    </u-navbar>
    <view id="wrap" class="wrap" style="background-color: #f6f6f6;"  :style="'margin-top:' + totalHeight + 'px'" >
      <view class="contain">
        <text>云助手</text>
        <text class="money">¥{{amount}}</text>
      </view>

      <view class="botton-view">
        <view class="bottom-wrap">
          <text class="bottom-text">完成</text>
        </view>
      </view>

    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      system: '',
      menu: '',
      statusBarHeight: '',
      menuTop: '',
      navigatorHeight: '',
      totalHeight: '',
      amount:''
    }
  },
  mounted() {
  },
  onLoad(e) {
    this.getSystemInfo()
    this.amount = e.amount
    // this.amount = this.$Route.query.amount
  },
  methods: {
    getSystemInfo() {
      //   //获取系统信息
      uni.getSystemInfo({
        success: res => {
          this.system = res
          //获取胶囊信息
          this.menu = uni.getMenuButtonBoundingClientRect()
          //计算组件高度
          this.statusBarHeight = this.system.statusBarHeight //状态栏高度
          this.menuHeight = this.menu.height //胶囊高度
          this.menuTop = this.menu.top //胶囊与顶部的距离
          //导航栏高度= （胶囊顶部距离-状态栏高度） x 2 + 胶囊的高度
          this.navigatorHeight = (this.menu.top - this.system.statusBarHeight) * 2 + this.menu.height
          //总高度 = 状态栏的高度 + 导航栏高度
          this.totalHeight = this.statusBarHeight + this.navigatorHeight
        }
      })
    },

  }
}
</script>
<style>
page {
  height: 100%;
  background-color: #f6f6f6;
}
</style>
<style scoped lang="scss">
/deep/ .uicon-arrow-left{
  font-size: 32rpx!important;
}
/deep/.u-navbar__content{
  background-color: #f6f6f6!important;
}
/deep/.u-navbar__content__left{
  display: none!important;
}
/deep/ .u-status-bar{
  background-color: #f6f6f6!important;;
}
.contain{
  margin-top: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden
}
.money{
  margin-top: 20rpx;
  font-size: 40rpx;
  font-weight: bold;
}
.botton-view{
  margin-top: 400rpx;
}
.bottom-wrap{
  background-color:#f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 350rpx;
  height: 100rpx
}
.bottom-text{
  font-size: 32rpx;
  color:#02b65c;
}
</style>


